<template>
	<view style="width: 100%;">
		<view @click="open()">
			<slot >
				<text>选择地址</text>
			</slot>
		</view>
		<u-picker :show="show" :closeOnClickOverlay="true" title="选择城市" :defaultIndex="defaultIndex"
		  ref="uPicker" @change="changeHandler" keyName="name" 
		  :columns="columns" @confirm="selectCity" @cancel="closeCity"
		   :confirmColor="color" @close="closeCity()"></u-picker>
	</view>
</template>
<!-- 通过this.$appData.address获取值 -->
<script>
	export default {
		name:"form-address",
		data() {
			return {
				color:"#3c9cff",
				show:false,
				cityList:{},
				columns: [[],[],[]],
				defaultIndex:[]
			};
		},props:{
			value:{
				type:Array,
				default:function(){
					return [];
				}
			}
		}
		, model: {
            prop: 'value',
            event: 'change'
        },computed:{
            result: {
                get:function() {
                    return this.value;
                },
                set:function (v){
                    this.$emit("change", v);
                }
            }
        },created() {
        	if(!Array.isArray(this.value)){
				this.result = []
			}
			if(this.$appData.data&&this.$appData.data.app_color){
				this.color = this.$appData.data.app_color;
			}
			
			let self = this;
			if(!this.moxi.length(this.cityList)){
				this.getAddress((data)=>{
					self.cityList = data;
					self.init()
				})
			}
        },mounted() {
        	if(!this.result[2]){
				if(!this.columns[0].length){
					for(let k in this.cityList){
							this.columns[0].push(this.cityList[k]);
					}
				}
				this.changeHandler({columnIndex:0,index:0})
			}
        },methods:{
			open(){
				this.show = true
			},
			init(){
				if(this.result[2]){
					let num = 0;
					for(let k in this.cityList){
						this.columns[0].push(this.cityList[k]);
						if(this.cityList[k].id==this.result[0]){
							this.defaultIndex.push(num);
							num = 0;
							for(let k2 in this.cityList[k].list){
								this.columns[1].push(this.cityList[k].list[k2]);
								if(this.cityList[k].list[k2].id==this.result[1]){
									this.defaultIndex.push(num);
									num = 0;
									for(let k3 in this.cityList[k].list[k2].list){
										this.columns[2].push(this.cityList[k].list[k2].list[k3]);
										if(this.cityList[k].list[k2].list[k3].id==this.result[2]){
											this.defaultIndex.push(num)
										}else{
											num++
										}
									}
								}else{
									num++;
								}
							}
						}else{
							num++
						}
					}
				}else{
					
				}
				
			},
		
			selectCity(e){//确认选择
				this.show = false;
				if(e.value.length){
					this.$set(this.result,0,e.value[0].id)
					this.$set(this.result,1,e.value[1].id)
					this.$set(this.result,2,e.value[2].id)
		
					this.$emit("change", this.result);
				
				}
			},
			closeCity(){
				this.show = false;
				
			},
			 changeHandler(e) {
					const {
						columnIndex,
						index,
						// 微信小程序无法将picker实例传出来，只能通过ref操作
						picker = this.$refs.uPicker
					} = e
					
					let cur = this.columns[columnIndex][index];
					if(columnIndex===0){
						this.$set(this.columns,1,[])
						this.$set(this.columns,2,[])
						for(let k in cur.list){
							this.columns[1].push(cur.list[k]);
							for(let k2 in cur.list[k].list){
								this.columns[2].push(cur.list[k].list[k2]);
							}
						}
						this.$set(this.defaultIndex,0,index)
						this.$set(this.defaultIndex,1,0)
						this.$set(this.defaultIndex,2,0)
						picker.setColumnValues(1, 0)
						picker.setColumnValues(2, 0)
					}else if(columnIndex === 1){
						this.$set(this.columns,2,[])
						for(let k in cur.list){
							this.columns[2].push(cur.list[k]);
						}
						picker.setColumnValues(2, 0)
					}
					
				}
		}
	}
</script>

<style>

</style>